<template>

  <el-table
    :data="tableData"
    :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }"
    row-key="parent_Id"
    default-expand-all
  >
   <el-table-column type="index" width="50" />
    <el-table-column prop="material_Category_Name" label="Name" />
  </el-table>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { reactive,onMounted, ref } from 'vue'

interface User {
  material_Category_Id: number
  material_Category_Name: string
  parent_Id: number
  childrens?: User[]
}

const treeProps = reactive({
  checkStrictly: false,
})

const selectable = (row: User) => ![1, 31].includes(row.material_Category_Id)
const tableData=ref([{
      "material_Category_Id": 1,
      "material_Category_Name": "Apple ",
      "parent_Id": 0,
      "childrens": [
        {
          "material_Category_Id": 3,
          "material_Category_Name": "Apple Air1",
          "parent_Id": 1,
          "childrens": []
        },
      ]
    },])
    //物资分类显示
const getlist = () => {
axios.get('http://localhost:5129/api/Materials/GetCategory').then(res => {
  const data = res.data.data as User[]
  console.log(res.data)
  tableData.value =  res.data.data

})
}

onMounted(() => {
  getlist()
})

</script>
